<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style/style.css">
</head>
<body>
	
	<!-- 左侧放大镜容器 -->
	<div class="container">
		<div class="small"> 
			<!-- 贴膜 -->
			<div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
			<img src="images/timg.jpg" alt="">
			<!-- 小盒子 -->
			<span class="grayBox"></span>

			
		</div>
		<div class="choice-btn">
				<img src="images/timg.jpg" alt="">
				<img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
		</div>
	</div>
	<!-- 大图容器 -->
	<div class="big">
		<!-- 大图图片 -->
		<img src="images/timg.jpg" alt=""> 
	</div>

</body>
<script>
    function Table(){
        // 正方形小盒子
        this.square = document.querySelector('.grayBox')
        this.minBox = document.querySelector('.small')
        this.minBox_img=document.querySelector('.small img')
        this.bigBox = document.querySelector('.big')
        this.btn=document.querySelectorAll('.choice-btn img')
        this.bigBox_img=document.querySelector('.big img')
		// 避免重绘，把小正方形的大小在构造函数里先实例
        this.square_size={
            width:parseInt(getComputedStyle(this.square).width),
            height:parseInt(getComputedStyle(this.square).height)
        }
        this.minBox_size = {
            width:this.minBox.offsetWidth,
            height:this.minBox.offsetHeight
        }
        this.bigBox_size={
            width:parseInt(getComputedStyle(this.bigBox).width),
            height:parseInt(getComputedStyle(this.bigBox).height)
        }
        this.bigBox_img_size={
            width:parseInt(getComputedStyle(this.bigBox_img).width),
            height:parseInt(getComputedStyle(this.bigBox_img).height)
        }
        this.bindEvent();
    }
		
        Table.prototype.bindEvent=function(){
            var self = this;
            this.minBox.onmouseover=function(){
                self.square.style.display='block'
                self.bigBox.style.display='block'
            }
        // 元素显示隐藏;
		// 在鼠标进入时显示小方框与放大图片的那个方框

		// 在鼠标移出时把小方框还有放大图片的方框隐藏
            this.minBox.onmouseout = function(){
                self.square.style.display='none'
                self.bigBox.style.display='none'
            }

            this.minBox.onmousemove = function(evt){
                var e = evt ||window.event;
                var _left = e.offsetX-50;
                var _top = e.offsetY-50;
                if(_left<=0){
                    _left=0
                }
                if(_top<=0){
                    _top=0;
                }
                var max_left=self.minBox_size.width-self.square_size.width-8;
                if(_left>=max_left){
                    _left=max_left
                }
                var max_top=self.minBox_size.height-self.square_size.height-8;
                if(_top>=max_top){
                    _top=max_top;
                }
                self.square.style.left=_left+'px';
                self.square.style.top=_top+'px';
                    // 鼠标运动;

                                // 边界检测 : 先计算再赋值; 
                                // 找极值; 判定边界;
                                // 数据的预处理 : 

                                // top 是关键字; 无法作为变量存储数据;

                                // offset 测量家族 : 有性能问题;
                                // 会导致页面的重绘;
                                // 页面的回流;
                var per_left=(_left/max_left).toFixed(2);
                var per_top = (_top/max_top).toFixed(2);
                        // console.log(prop_left, prop_top)
                                    // self.big_img_size.width - self.big_size.width
                                    // 大盒子最大的移动距离;
                var bigBox_maxleft=self.bigBox_img_size.width-self.bigBox_size.width;
                var bigBox_maxtop=self.bigBox_img_size.height-self.bigBox_size.height;
                self.bigBox_img.style.left=-bigBox_maxleft*per_left+'px';
                self.bigBox_img.style.top=-bigBox_maxtop*per_top+'px';
            }
            // 循环把鼠标选中的图投影到小框和放大镜中
        for(var i = 0 ; i<this.btn.length;i++){
           this.btn[i].index=i;
           this.btn[i].onmousemove=function(){
                self.index=this.index;
                self.minBox_img.src=this.src;
                self.bigBox_img.src=this.src;
           } 
        }
        }
			
	
		

	var mf = new Table();

</script>
</html>